<!--表格组件的父组件，子组件的模板如model-1.vue-->
<template>
</template>
<script>
  export default {
    data() {
      return {
        tableHeight: 0,//表格的高度
      }
    },
    components: {},
    mounted() {
    },
    activated() {
      this.initTableHeight();
    },
    beforeRouteLeave(to, from, next) {
      next();
    },
    methods: {
      //初始化表格的高度
      initTableHeight: function () {
        let that = this;
        let parentHeight = that.$refs.parentContainer.offsetHeight
        let optionHeight = that.$refs.optionParentContainer.offsetHeight
        let paginationHeight = that.$refs.paginationParentContainer.offsetHeight
        let topHeight = 48;//最顶部导航栏的高度
        that.tableHeight = window.innerHeight - optionHeight - paginationHeight - that.getScrollWidth() - topHeight;
        window.addEventListener('resize', function () {
          let parentHeight = that.$refs.parentContainer.offsetHeight
          let optionH = that.$refs.optionParentContainer.offsetHeight
          let paginationH = that.$refs.paginationParentContainer.offsetHeight
          that.tableHeight = window.innerHeight - optionH - paginationH - that.getScrollWidth() - topHeight;
        })
      },

      //获取滚动条宽度
      getScrollWidth() {
        let noScroll, scroll, oDiv = document.createElement('DIV')
        oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'
        noScroll = document.body.appendChild(oDiv).clientWidth
        oDiv.style.overflowY = 'scroll'
        scroll = oDiv.clientWidth
        document.body.removeChild(oDiv)
        return noScroll - scroll
      },
    }
  }
</script>
<style>
</style>
